<template>
  <div class="coupon-item">
    {{ coupon.shop_name }} ｜ {{ coupon.name }}
    <span @click="getCoupon">{{ coupon.status ? "已领取" : "领取" }}</span>
  </div>
</template>

<script>
import api from "@/api";
export default {
  name: "CouponItem1",
  props: {
    coupon: Object,
  },
  methods: {
    getCoupon() {
      if (this.coupon.status == 0) {
        api.COUPON_RECEIVE(this.coupon.coupon_id).then((res) => {
          console.log(res);
          this.$message.success("领取成功");
          this.$emit("change", 1);
        });
      } else {
        this.$message.info("该优惠券已被领取");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-item {
  height: 24px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #dc2c1a;
  font-size: 12px;
  color: #dc2c1a;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
